<template>
  <div class="lossing_student">
    <el-dialog :title="(islossed || editlossed) ? '学员流失' : '流失原因'" :visible.sync="visible" @close="handleCancel">
      <div v-if="islossed || editlossed">
        <el-row>
          <el-col :span="4">学员姓名：</el-col>
          <el-col :span="20">
            <div class="grid-content bg-purple-light">
              {{studentInfo.name}}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">流失原因（可多选）：</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-checkbox-group v-model="selectedReason" @change="handleSelected">
              <el-checkbox v-for="(item, index) in causeList" :key="index" :label="item"></el-checkbox>
            </el-checkbox-group>
            <el-input class="textarea-height" v-model.trim="reason" v-if="isShow" @change="handleOther" :maxlength="200" type="textarea" :rows="10" number-word />
            <div class="red" v-if="editReason">请输入流失原因</div>
          </el-col>
        </el-row>
      </div>
      <div v-else class="lossingReason">
        <el-row>
          <el-col :span="6" style="margin-left: 25px; text-align: center" v-for="(item, index) in causeList" :key="index">
            <el-tag type="success">{{item}}</el-tag>
          </el-col> 
        </el-row> 
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" v-if="islossed || editlossed" :disabled="selectedReason.length === 0 || (selectedReason.length > 0 && editReason)">确 定</el-button>
        <el-button @click="handleCancel" v-if="islossed || editlossed">取 消</el-button>
        <el-button @click="hanldeEdit" type="primary" v-else-if="!islossed">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
export default {
  props: {
    islossed: {
      type: Boolean,
      default: true
    },
    studentInfo: {
      type: Object
    }
  },
  data () {
    return {
      visible: true,
      selectedReason: [],
      causeList: ['转班', '离家太远', '学费偏贵', '学员不喜欢该运动', '家长不喜欢该运动', '不满意教学质量', '不满意教学环境', '学员超龄', '其他'],
      reason: '',
      editReason: false,
      isShow: false,
      editlossed: false
    }
  },
  computed: {
    // ...mapGetters({})
  },
  methods: {
    handleCancel () {
      this.$emit('input', false)
    },
    handleSelected (value) {
      if (value && value.length) {
        if (value.some(item => item === '其他')) {
          this.isShow = true
          if (!this.reason.trim()) {
            this.editReason = true
          } else {
            this.editReason = false
          }
        } else {
          this.isShow = false
          this.editReason = false
        }
      } else {
        this.isShow = false
        this.editReason = false
      }
    },
    handleOther (value) {
      if (!this.reason.trim()) {
        this.editReason = true
      } else {
        this.editReason = false
      }
    },
    handleSubmit () {
      this.selectedReason.filter((item, index) => {
        if (item === '其他') {
          this.selectedReason.splice(index, 1, this.reason)
        }
      })
      let obj = {
        id: this.studentInfo.studentId,
        selectedReason: this.selectedReason
      }
      console.log(obj)
      this.$emit('success').$emit('input', false)
    },
    hanldeEdit () {
      this.editlossed = true
    }
  }
}
</script>

<style lang="scss">
  .lossing_student {
    .el-col{
      line-height: 36px;
    }
    .el-checkbox-group {
        margin-left: 20px;
       .el-checkbox {
         width: 30%;
       }
    }
    .el-textarea {
      margin-left: 20px;
      width: 90%;
    }
    .textarea-height{
      .el-textarea__inner{
        height: 80px;
      }
    }
    .red {
      color: #ff4949;
      font-size: 12px;
      line-height: 1;
      padding-top: 5px;
      margin-left: 20px;
    }
  }
</style>
